<script setup>
import MetaIcon from "@/components/MetaIcon.vue";
import {useDark, useToggle} from "@vueuse/core";

// 主题切换
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<template>
  <div class="container">
    <div class="menu">
      <div class="top">
        <RouterLink to="/">        <MetaIcon name="主界面"       icon="home"     tooltip/></RouterLink>
<!--        <RouterLink to="/template"><MetaIcon name="多模版渲染"   icon="template" tooltip/></RouterLink>-->
<!--        <RouterLink to="/table">   <MetaIcon name="数据建模"     icon="table"     tooltip/></RouterLink>-->
        <RouterLink to="/config/template"><MetaIcon name="配置: 模版集合" icon="el-icon-setting" tooltip/></RouterLink>
<!--        <RouterLink to="/config/mapping" ><MetaIcon name="配置: 类型映射" icon="mapping"  tooltip/></RouterLink>-->
        <RouterLink to="/config/database"><MetaIcon name="配置: 数据库"   icon="database" tooltip/></RouterLink>
        <RouterLink to="/config/language"><MetaIcon name="配置: 编程语言" icon="language" tooltip/></RouterLink>
      </div>
      <div class="bottom">
        <a style="cursor: pointer" @click="toggleDark()">  <MetaIcon name="主题切换" icon="theme" tooltip/></a>
        <RouterLink to="/account"> <MetaIcon name="账号" icon="el-icon-user"    tooltip/></RouterLink>
        <RouterLink to="/setting"> <MetaIcon name="设置" icon="el-icon-setting" tooltip/></RouterLink>
      </div>
    </div>
    <div class="main">
      <RouterView/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  overflow: hidden;

  .menu {
    background: var(--menu-color);
    height: 100vh;
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    a {
      display: flex;
      height: 40px;
      color: inherit;
      padding: 0 10px;

      &:hover {
        color: var(--el-color-primary);
      }
    }

    .router-link-active {
      color: var(--el-color-primary);
      border-left: 2px solid var(--el-color-primary);

      div {
        margin-left: -2px;
      }
    }
  }

  .main {
    //padding: 10px;
    flex-grow: 1;
  }
}
</style>